<div>
  <div class="sub-navbar">
    <div class="container">
      <div class="menus" v-for="(index, item) in menus">
        <ul class="nav nav-pills nav-sm">
          <li role="presentation" class="active" v-on:click="onSelectedMenu(item, '', $event)"><a href="#">{{item.value}}</a></li>
          <li role="presentation" v-for="(index2, item2) in item.submenus" v-on:click="onSelectedMenu(item, item2, $event)">
            <a href="#">{{item2.value}}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="col-sm-9">
      <div class="panel panel-default">
        <div class="panel-heading">
          {{ selectMenu.value }} / {{ selectSubmenu.value }}
        </div>
        <ul class="list-group" v-if="topics && topics.length > 0">
          <li class="list-group-item" v-for="item in topics">
            <a href="/zone/<%= zoneKey %>/<%= zoneTemplate %>/topic/{{item._id}}/show?appId=<%= appId %>">{{item.title}}</a>
          </li>
        </ul>
        <ul class="list-group" v-else>
          <li class="list-group-item">无数据</li>
        </ul>
      </div>
    </div>
    <div class="col-sm-3">
      <%- createPanel %>
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
    var appId = $('[name=app-id]').val();
    var zoneId = '<%= zoneId %>';
    var pagePrefix = '<%= apiPrefix.page %>';
    var dataPrefix = '<%= apiPrefix.data %>';
    var menusUtil = new MenusUtil(pagePrefix, dataPrefix);
    var topicsUtil = new TopicsUtil(pagePrefix, dataPrefix);
    var vue = new Vue({
      el: '#app',
      data: {
        menus: [],
        topics: [],
        selectMenu: {},
        selectSubmenu: {},
        pages: 1,
        currentPage: 1,
        canLoadData: true,
        errorMsg: '',
        successMsg: '',
      },
      methods: {
        getMenus: function() {
          menusUtil.getMenus({ zoneId: zoneId }, function(err, menus) {
              if (err) {
                vue.errorMsg = err;
                return;
              }

              vue.menus = menus;

              if (vue.menus && vue.menus.length > 0) {
                if (vue.menus[0].submenus && vue.menus[0].submenus.length > 0) {
                  vue.selectMenu = vue.menus[0];
                  vue.selectSubmenu = vue.menus[0].submenus[0];
                  vue.getData(1, vue.selectMenu.key, vue.selectSubmenu.key);
                } else {
                  vue.selectMenu = vue.menus[0];
                  vue.getData(1, vue.selectMenu.key);
                }
              } else {
                console.log('not menus');
              }
          })
        },
        getData: function(nextPage = 1, menuKey = '', submenuKey = '') {
          topicsUtil.getTopics(nextPage, zoneId, menuKey, submenuKey, function(err, topics, authors) {
            if (err) {
              vue.errorMsg = err;
              return;
            }

            var newTopics = topics;
            var newAuthors = authors;
            moment.locale('zh-cn');
            newTopics.forEach( function(item) {
              item.update_at_ago = moment(item.update_at).fromNow();
              var index = _.findIndex(newAuthors, function(i) {
                return i._id === item.author_id
              })

              if (index >= 0) {
                item.author = newAuthors[index]
              }
            })

            vue.topics = newTopics;
          });
        },
        onSelectedMenu: function(menu = '', submenu = '', event) {
          if (menu === '' && submenu === '') {
            return;
          }

          vue.selectMenu = menu;
          vue.selectSubmenu = submenu;

          vue.getData(1, menu.key, submenu.key);
          event.stopPropagation();
        },
      }
    });

    var scrollButtom = new ScrollButtom();
    scrollButtom.init(function() {
      if (vue.currentPage < vue.pages && vue.canLoadData) {
        vue.canLoadData = false;
        vue.getData(vue.currentPage + 1, vue.selectMenu, vue.selectSubmenu);
      }
    });

    vue.getMenus();
  });
</script>
